<template>
  <el-form label-width="120px" style="margin-top: 30px" >
<!--    单选按钮开始-->
    <el-form-item
        label="行程类型"
        class="animate__animated animate__fadeInDown">
      <el-radio-group v-model="planInfo.type">
        <el-radio label="单程" />
        <el-radio label="往返" />
      </el-radio-group>
    </el-form-item>
<!--    输入框-出发城市-->
    <el-form-item label="出发城市" class="animate__animated animate__fadeInDown">
      <el-autocomplete
          ref="leaveCityInput"
          v-model="planInfo.leaveCity"
          :fetch-suggestions="querySearch"
          placeholder="城市名"
          @select="handleSelect"
      />
    </el-form-item>
<!--    按钮-交换城市-->
    <el-form-item>
      <el-button
          class="animate__animated animate__fadeIn"
          @click="swapCity"
          type="success"
          :icon="Switch"
          circle
          style="margin-left: 70px; transform: rotate(270deg)"/>
    </el-form-item>
    <!--    输入框-到达城市-->
    <el-form-item label="到达城市"
                  class="animate__animated animate__fadeInLeft">
      <el-autocomplete
          ref="arriveCityInput"
          v-model="planInfo.arriveCity"
          :fetch-suggestions="querySearch"
          placeholder="城市名"
          @select="handleSelect"
      />
    </el-form-item>
    <!--    输入框-出发日期-->
    <el-form-item label="出发日期" ref="leaveTimeInput"
                  class="animate__animated animate__fadeInRight">
      <el-date-picker

          v-model="planInfo.leaveTime"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <!--    输入框-返回日期-->
    <el-form-item
        label="返回日期"
        v-show="planInfo.type === '往返'"
        ref="retraceTimeInput"
        class="animate__animated animate__fadeInUp">
      <el-date-picker
          v-model="planInfo.retraceTime"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
  </el-form>
<!--  按钮-搜索-->
  <el-button
      @click="search"
      id="searchButton"
      size="default"
      color="#409EFF">
        搜索
  </el-button>

</template>

<script>
import {reactive, ref} from "vue"
import {Switch, Search} from "@element-plus/icons-vue"
import { ElMessage } from 'element-plus'
import router from "../../router";
import {useStore} from "vuex";
import {useRoute} from "vue-router";

export default {
  name: "PlaneInfo",
  data(){
    return {
      planeHintInfo:[]
    }
  },
  methods:{
    querySearch(queryString, cb) {
      let planeHintInfo = this.planeHintInfo;
      let results = queryString ? planeHintInfo.filter(this.createFilter(queryString)) : planeHintInfo;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "北京" },
        { "value": "上海" },
        { "value": "广州" },
        { "value": "深圳" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.planeHintInfo = this.loadAll()
  },
  setup() {
    const arriveCityInput = ref(null)
    const route = useRoute()
    const store = useStore()
    const leaveCityInput = ref(null)
    const leaveTimeInput = ref(null)
    const flightSearchInfo = reactive({
      type: '单程',
      leaveCity: '',
      arriveCity: '',
      leaveTime: '',
      retraceTime: ''
    })
    // 交换按钮， 交换城市
    const swapCity = () => {
      console.log(route.params)
      console.log("swap::" + store.state.searchData)
      if (flightSearchInfo.leaveCity === '' && flightSearchInfo.arriveCity === ''){
        leaveCityInput.value.focus()
        ElMessage({
        message: '请输入城市名',
        type: 'warning',
        })
      }
      else {
        let temp = flightSearchInfo.leaveCity
        flightSearchInfo.leaveCity = flightSearchInfo.arriveCity
        flightSearchInfo.arriveCity = temp
      }
    }
    // 搜索按钮
    const search = () => {
      if (flightSearchInfo.leaveCity === '') {
        leaveCityInput.value.focus()
        ElMessage({
          message: '请输入城市名',
          type: 'warning',
        })
      } else if (flightSearchInfo.arriveCity === '') {
        arriveCityInput.value.focus()
        ElMessage({
          message: '请输入城市名',
          type: 'warning',
        })
      } else {
        if (flightSearchInfo.leaveTime === '') {
          flightSearchInfo.leaveTime = store.state.getDate(new Date())
        }
        console.log(flightSearchInfo.leaveTime)
        store.commit("flightSearch", flightSearchInfo)
        store.commit("navigationChange", 'plane')
      }
    }
    return {
      planInfo: flightSearchInfo,
      Switch,
      Search,
      leaveCityInput,
      arriveCityInput,
      leaveTimeInput,
      search,
      swapCity
    }
  }
}
</script>

<style scoped>
#searchButton {
  position: relative;
  top: -5px;
  left: 130px;
  color: aliceblue;
}

.animate__fadeIn{
  --animate-duration: 3s;
}
</style>